<template>
    <div class="host">
        <header>
            <input type="text" placeholder="输入商品名称">
        </header>
        <div class="swiper"></div>
        <div class="title">猜你喜欢</div>
        <ul>
            <!-- <li  v-for="(item,index) in uls" :key="index" >{{item.lis}}</li> -->
            <li>综合排序</li>
            <li>距离最近</li>
            <li>销量最高</li>
            <li>筛选</li>
        </ul>
        <div class="mach">
            <span class="tem" v-for="(item,index) in muches" :key="index">{{item.mas}}</span>
        </div>
        <div class="nood">
            <div @click="toMore(item.mtWmPoiId)" class="goods" v-for="(item,index) in match" :key="index">
                <img :src="item.picUrl" alt="">
                <div class="left">
                    <h3>{{item.name}}</h3>
                    <div class="top">
                        <span class="love">{{item.averagePriceTip}}</span>
                        <span class="sell"> {{item.monthSalesTip}}</span>
                    </div>
                    <div class="two">
                        <span class="send">{{item.minPriceTip}}</span>
                        <span class="mend">{{item.shippingFeeTip}}</span>
                        <span class="center">{{item.deliveryTimeTip}}</span>
                        <span class="miter">{{item.distance}}</span>
                    </div>

                </div>
            </div>
        </div>
    </div>
</template>

<script>

import { shop_list } from "../../api";

export default {
    data(){
        return{
            // uls:[
            //     {lis:"综合排序"},{lis:"距离最近"},{lis:"销量最高"},{lis:"筛选"}
            // ],
            muches:[
                {mas:"年货节热卖"},{mas:"津贴联盟"},{mas:"满减优惠"},{mas:"品质联盟"}
            ],
            match:[]
        }
    },
    mounted(){
        shop_list({status:0}).then((res)=>{
            console.log(res.data.list);
            this.match = res.data.list
        })
    },
    methods:{
        toMore(id){
            this.$router.push('/more/'+id)
        }
    },
    
}
</script>

<style scoped>
    .host {
        overflow: auto;
        position: fixed;
        /* top: 160px; */
        top: 0px;
        height: 600px;
        line-height: 20px;
        /* margin-left: 0px; */
    }
    header {
        width: 100%;
        height: 70px;
        background-color: lightskyblue;
        overflow: hidden;
    }
    input {
        width: 80%;
        height: 30px;
        background-color: white;
        border: none;
        border-radius: 10px;
        display: block;
        margin:20px auto;
        text-align: center;
        line-height: 40px;
    }   
    .swiper {
        width: 95%;
        height: 100px;
        margin:  auto;
        background-color: palegreen;
        border-radius: 10px;
    }
    .title {
        font-weight: bolder;
        height: 25px;
        line-height: 20px;
    }
    ul {
        height: 30px;
        margin:auto;
        display: flex;
        justify-content: space-between;
    }
    .mach {
        width: 100%;
        height: 30px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }
    .tem {
        width: 24%;
        height: 100%;
        background-color: #ccc;
        text-align: center;
        /* line-height: 30px; */
    }
    .nood {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid #000;
    }
    .goods {
        width: 100%;
        height: 100%;
        display: flex;
        margin-top: 5px;
    }
    img {
        display: block;
        width: 70px;
        height: 70px;
    }
    .love {
        color: yellow;
    }
    .sell {
        display: inline-block;
        margin-left: 20px;
    }
    .send,
    .mend,
    .center  {
        display: inline-block;
        margin-right: 5px;
    }
    .top {
        margin-top: 0px;
    }
</style>